<template>
	<view>
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				个人中心
			</view>
		</view>
		<view class="content" :style="{'margin-top':capsuleTop}">
			<view class="top">
				<view class="top-left">
					<image class="top-img" :src="icon" mode=""></image>
				</view>
				<view class="top-center">
					<view class="top-center-name">
						 {{phone ? '用户'+ phone : '用户'}}
					</view>
					<view class="">
						<image class="top-img1" :src="icon1" mode=""></image>
					</view>
				</view>
				<view class="top-right"  @click="memberFn">
					<image class="top-right-img1" :src="icon2" mode=""></image>
					<view class="top-right-member">
						会员码
					</view>

				</view>
			</view>
			<view class="card" :style="{'backgroundImage':`url(${poprp})`}" >
				<view class="card-time" v-if="start">
					有效期至：{{start}}
				</view>
				<view class="card-left">
					<image class="card-img1" :src="icon3" mode=""></image>
				</view>
				<view class="card-center">
					<view class="card-center-text">
						199至尊会员
					</view>
					<view class="card-center-text" style="margin-top: 30rpx;">
						享囤券权益、体检权益
					</view>
				</view>
				<view class="card-btn" v-if="!member">
					<button v-if="!phone"  class="card-btn2" open-type="getPhoneNumber" @getphonenumber="handlePhone">立即购买</button>
					<view v-else class="card-btn2" @click="btn">
							立即购买
				</view>
				</view>
			</view>
			<image class="card-bg1" :src="icon5" mode=""></image>
			<view class="footer" style="margin-top: -120rpx;">
				<view class="footer-title">
					我的订单
				</view>
				<view class="footer-list">
					<view class="footer-card" v-for="(item,index) in list" :key="index"  @click="typeFns(index)">
						<view class="footer-item">
							<image class="footer-img" :src="item.url" mode=""></image>
						</view>
						<view class="footer-name">
							{{item.name}}
						</view>
					</view>

				</view>
			</view>
			<view class="line">

			</view>
			<view class="phone"  v-if="!phone">
				<view class="phone-text">
					找不到订单和优惠券？绑定手机号试试？
				</view>
				<button class="phone-btn" open-type="getPhoneNumber" @getphonenumber="handlePhone">立即绑定</button>
			</view>
			<view class="footer">
				<view class="footer-title">
					我的服务
				</view>
				<view class="footer-list">
					<view class="footer-card" v-for="(item,index) in lists" :key="index"  @click="typeFn(index)">
						<view class="footer-item">
							<image class="footer-img" :src="item.url" mode=""></image>
						</view>
						<view v-if="index != 1" class="footer-name">
							{{item.name}}
						</view>
						<button v-if="index == 1" plain="true"  class="footer-kefu" send-message-title="客服会话" show-message-card
							send-message-path="/pages/index/index" open-type='contact'>{{item.name}}</button>
					</view>

				</view>
			</view>
			<view class="line">

			</view>
			<!-- <view class="footer">
				<view class="footer-title">
					我的会员卡
				</view>
				<view class="footer-cards" @click="open" >
					<view class="footer-cards-img" :style="{'backgroundImage':`url(${poprp1})`}">

					</view>
					<view class="phone">
						<view class="phone-text">
							<view class="">
								买多少送多少，代金券囤不停！
							</view>
							<view class="phone-texts">
								￥199
							</view>
						</view>
						<view class="phone-btns" >
							立即购买
						</view>
					</view>
				</view>

			</view> -->

			<view>
				<u-mask :show="show" @click="show = false" style="z-index: 2000;">
					<view class="warp">
						<view class="modal-content">

							<image class="modal-card-img2" :src="icon7" mode=""></image>
							<image class="modal-card-img3" :src="icon8" mode=""></image>
							<view class="modal-card">

								<image class="modal-card-img1" :src="icon6" mode=""></image>
								<view class="modal-card-text" style="margin-top: -30rpx;">
									1、享受会员特权365天。 (消费/充值多少现金，就送多少代金券) 。
								</view>
								<view class="modal-card-text">
									2、赠送代金券199元。
								</view>
								<view class="modal-card-text">
									3、成功介绍2位红卡会员， 再送代金券199元，以此类推。
								</view>

								<button v-if="!phone" class="modal-card-btn" open-type="getPhoneNumber"
									@getphonenumber="handlePhone">立即绑定</button>

								<view class="modal-footer-text">
									温馨提示： 您仅享有7天免费体验期，请在7天内交费成为会员。否则,视为放弃权益，您的代金券将被自动清零。
								</view>
							</view>


						</view>
					</view>


				</u-mask>
			</view>
			<memberPay :payshow="payshow" :phone="phone" :url="url" @reset="reset"  @close="close"></memberPay>
			<comments :shows="shows"  @close1="close1" @successMember="successMember"></comments>
			<!-- <movable-area class="fixed-box">
							<movable-view class="fixed-button" direction="vertical" :inertia="true">
								<view class="customer-service">
									<button class="sign-btn-contact" send-message-title="客服会话" show-message-card
										send-message-path="/pages/index/index" open-type='contact'>确 认</button>
									<view>
										<image class="customer-service-img" mode="widthFix" :src="icon3"></image>
									</view>
									<view>在线客服</view>
								</view>
							</movable-view> 
			</movable-area>-->
			<u-popup v-model="membershow" mode="bottom" height="400px"  closeable="true">
			
				
				<view class="foo-li" style="padding-bottom: 60rpx;" >	
					<view class="p-title">
						填写您的申请信息
					</view>
					<view class="li-list">
						<view class="li-lists">
							<text class="li-lists-text">姓名：</text>
							<input class="li-lists-ipt" v-model="name"  type="text" placeholder="请输入您的姓名"  />
						</view>
						<view class="li-lists">
							<text class="li-lists-text">电话：</text>
							<input class="li-lists-ipt" v-model="phones"  type="number" placeholder="请输入您的号码" />
						</view>
						<view class="li-lists">
							<text class="li-lists-text">邀请码：</text>
							<input class="li-lists-ipt" v-model="inviter"  type="text" placeholder="请输入您的邀请码(选填)" />
						</view>
					</view>
					<view class="sq-btn" @click="apply">
						立即申请
					</view>
				</view>
			
			</u-popup>
		</view>
		
	</view>
</template>

<script>
	import {
		log
	} from 'util';
import {memberPay}  from '../comments/memberpay.vue'
import {comments}  from '../comments/comments.vue'
	export default {
		components: {
		memberPay,
		comments
		},
		data() {
			return {
				shows:false,
				show: false,
				payshow:false,
				membershow:false,
				content: '东临碣石，以观沧海',
				phone:'',//手机号
				phones:'',//手机号
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				icon: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user8.png',
				icon1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user6.png',
				icon2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user3.png',
				icon3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user1.png',
				icon4: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user7.png',
				icon5: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user4.png',
				icon6: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user19.png',

				icon7: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user17.png',
				icon8: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user18.png',
				poprp: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user5.png',
				poprp1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user2.png',
				list: [{
						url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user9.png',
						name: '商城订单'
					},
					{
						url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user10.png',
						name: '线下订单'
					},
					// {
					// 	url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user11.png',
					// 	name: '记账订单'
					// },
					{
						url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user12.png',
						name: '全部订单'
					},

				],
				lists: [{
						url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user13.png',
						name: '兑换礼品'
					},
					{
						url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user14.png',
						name: '客服'
					},
					// {
					// 	url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user15.png',
					// 	name: '分销中心'
					// },
					{
						url: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/user/user16.png',
						name: '商家入驻'
					},

				],
				code: '',
				name:'',
				inviter:'',
				member:'',//会员号
				appid:'',
				path:'',
				url:'',
				start:''
			}
		},
		onLoad() {

		},
		onShow() {
			this.getUserindex();
			this.getUrl();
			
		},
		watch: {
			
		},
		methods: {
			reset(){
				this.getUrl();
			},
			async getUrl() {
				
				try {
					let data = await new this.Request(this.Urls.m().scan).modepost();
					this.url = data.data.url;
				} catch (e) {
					console.log(e, 'e')
					
				}
			
			},
			async getUserindex() {
		
				try {
					let data = await new this.Request(this.Urls.m().user).modepost();
						console.log(data,'个人中心')
						this.phone = data.data.user.phone;
						this.member = data.data.user.member;
						this.appid = data.data.appid;
						this.path = data.data.path;
						this.start = data.data.user.member_end.substring(0, 10)
				} catch (e) {
					console.log(e, 'e')
					
				}
			
			},
			close(){
				this.payshow = false;
			},
			
			close1(){
				this.shows = false;
			},
			successMember(){
				new this.$Toast('购买会员成功！').showtoast();
				this.shows = false;
				this.getUserindex();
				this.getUrl();
			},
			typeFn(i){
				if(i == 2){
					if(!this.phone){
						uni.showToast({
									title: "请先授权绑定手机号！",
									icon: 'none',
									mask:true,
								});
					}else {
						this.membershow = true;	
					}
					
				}else if(i == 0){
					if(!this.phone){
						uni.showToast({
									title: "请先授权绑定手机号！",
									icon: 'none',
									mask:true,
								});
					}else {
						uni.navigateToMiniProgram({
						  appId:this.appid,
						  path: this.path,
						  extraData: {
						    'data1': 'test'
						  },
						  success(res) {
						    // 打开成功
						  }
						})
					}
					
				}
				// uni.showToast({
				// 			title: "正在开发中，敬请期待！",
				// 			icon: 'none',
				// 			mask:true,
				// 		});
			},
			typeFns(i){
				uni.navigateTo({
					url: '/pages/my/card'
				});
			},
			async apply() {
				if(!this.name){
					uni.showToast({
								title: "请填写姓名！",
								icon: 'none',
								mask:true,
							});
				}else if(!this.phones){
					uni.showToast({
								title: "请填写手机号！",
								icon: 'none',
								mask:true,
							});
				}
				else{
				  let query = {
				  	name:this.name,
				  	phone:this.phones,
					inviter:this.inviter
				  }
				  try {
				  	let data = await new this.Request(this.Urls.m().apply,query).modepost();
				  	if(data.code == 0){
						uni.showToast({
									title: "申请成功！",
									icon: 'none',
									mask:true,
								});
							this.membershow = false;
					}else{
						uni.showToast({
									title: data.msg,
									icon: 'none',
									mask:true,
								});
					}
				  } catch (e) {
				  	console.log(e, 'e')
				  	
				  }	
				}
				
			
			},
			memberFn(){
				if(!this.phone){
					uni.showToast({
								title: "请先绑定手机号！",
								icon: 'none',
								mask:true,
							});
				}else{
					this.payshow = true;	
				}
				
			},
			async handlePhone(e) {
				
				let params = {
					code: e.detail.code
				};
					console.log(e.detail.code,'code')
				try {
					let data = await new this.Request(this.Urls.m().getphone, params).modepost();
					uni.setStorageSync('phone',data.data.phone);
					this.phone = data.data.phone;
					new this.$Toast('获取成功').showtoast()
				} catch (e) {
					console.log(e, 'e')
					new this.$Toast('获取失败').showtoast()
				}

			},

			btn() {
					this.shows = true;
			},
			open() {
				this.show = true;
			}
		},
	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
		/* 渐变色 */
		/* 其他样式 */
	}
	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.custom-top {
		width: 100%;
	}

	.top-height {
		background: linear-gradient(to right, #51D3F4, #fff);
	}

	.content {}

	.top {
		overflow: hidden;
		box-sizing: border-box;
		display: flex;
		padding: 20rpx 28rpx 0;
	}

	.top-left {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
	}

	.top-img {
		width: 100%;
		height: 100%;
	}

	.top-center {
		flex: 1;
		margin-left: 25rpx;
	}

	.top-center-name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.top-img1 {
		width: 106rpx;
		height: 50rpx;
	}

	.top-right {
		text-align: center;
		width: 100rpx;

	}

	.top-right-img1 {
		width: 42rpx;
		height: 42rpx;
	}

	.top-right-member {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.card {
		position: relative;
		margin: 53rpx auto 0;
		display: flex;
		overflow: hidden;
		box-sizing: border-box;
		width: 696rpx;
		height: 177rpx;
		background: no-repeat;
		background-size: 100% 100%;

	}

	.card-time {
		position: absolute;
		top: 26rpx;
		right: 31rpx;
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FCCC8C;
	}

	.card-img1 {
		margin: 29rpx 0 0 7rpx;
		width: 104rpx;
		height: 104rpx;
	}

	.card-center-text {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FCCC8C;
	}

	.card-center {
		margin-top: 49rpx;
		flex: 1;
	}

	.card-btn {
		margin: 77rpx 45rpx 0 0;
		width: 184rpx;
		height: 51rpx;
	}

	.card-btn-img1 {
		width: 184rpx;
		height: 51rpx;
	}
	.card-btn1 {
		text-align: center;
		width: 184rpx;
		height: 51rpx;
		color: #FCCC8C;
		line-height: 51rpx;
	}
	.card-bg1 {
		margin-top: -20rpx;
		width: 750rpx;
		height: 136rpx;
	}

	.list {
		overflow: hidden;
	}

	.list-title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
	}

	.footer {
		width: 100%;
		background: #FFFFFF;
		border-radius: 26rpx 26rpx 0rpx 0rpx;
	}

	.footer-title {

		margin: 29rpx 0 0 40rpx;
		height: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		line-height: 38rpx;
	}

	.footer-list {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.footer-card {
		margin-top: 40rpx;
	}

	.footer-item {
		width: 126rpx;
		height: 126rpx;
		margin: 20rpx;
		border-radius: 26rpx;
	}

	.footer-img {
		width: 126rpx;
		height: 126rpx;
	}

	.footer-name {
		text-align: center;
		height: 25rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}
	.footer-kefu {
		
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		background-color: transparent;
		border: 0;
		line-height: 40rpx;
	}
	.line {

		margin: 38rpx auto 0;
		width: 694rpx;
		height: 2rpx;
		border: .5px solid #333333;
		opacity: 0.08;
	}

	.phone {
		display: flex;
		margin-top: 9rpx;
		padding: 0 28rpx;
	}

	.phone-text {
		flex: 1;
	}

	.phone-texts {
		font-size: 36rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF161E;
	}

	.phone-btns {
		margin-top: 32rpx;
		width: 197rpx;
		height: 70rpx;
		background: #4CCFEB;
		border-radius: 35rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
		line-height: 70rpx;
		text-align: center;
	}

	.phone-btn {
		width: 180rpx;
		height: 56rpx;
		border: 2px solid #34C8E8;
		border-radius: 28rpx;
		text-align: center;
		line-height: 56rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #4CCFEB;
	}
   .card-btn2 {
		width: 160rpx;
		height: 56rpx;
		background: #FEEED2;
		border-radius: 28rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #382E2B;
		text-align: center;
		line-height: 56rpx;
	}
	.footer-cards {
		margin: 27rpx auto 0;
		width: 694rpx;
		height: 516rpx;
		background: #FFFFFF;
		border: 1px solid #C7C7C7;
		box-shadow: 0rpx 9rpx 14rpx 0rpx rgba(134, 134, 134, 0.25);
		border-radius: 44rpx 44rpx 26rpx 26rpx;

	}

	.footer-cards-img {
		width: 694rpx;
		height: 384rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.modal-card {
		padding-bottom: 40rpx;
		margin: o auto;
		width: 638rpx;
		background: #FFFFFF;
		border-radius: 26rpx;
	}

	.modal-content {
		position: relative;
		width: 638rpx;
		margin: 146rpx quto 0;
	}

	.modal-card-img1 {
		width: 638rpx;
		height: 209rpx;
	}

	.modal-card-img2 {
		position: absolute;
		top: -126rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 300rpx;
		height: 300rpx;
	}

	.modal-card-img3 {
		position: absolute;
		bottom: -132rpx;
		width: 88rpx;
		height: 88rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.modal-card-text {
		margin: 0 auto 50rpx;
		width: 526rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 38rpx;
	}

	.modal-card-btn {
		margin: 0 auto;
		width: 369rpx;
		height: 88rpx;
		background: linear-gradient(-90deg, #562C0E 0%, #805638 100%);
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		text-align: center;
		color: #FFFFFF;
		line-height: 88rpx;
	}

	.modal-footer-text {
		margin: 70rpx auto 0;
		width: 510rpx;
		height: 141rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 38rpx;
	}

	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	.fixed-box {
			pointer-events: none; // 这里是重点，盒子可穿透操作
			width: 100vw;
			height: 90vh;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 2000;
		}
	
		.fixed-button {
			pointer-events: auto;
			width: max-content;
			height: auto;
	
	
			display: flex;
			align-items: center;
			justify-content: center;
			//控制按钮在页面的位置
			left: 0rpx;
			top: 800rpx;
	
		}
	
		.customer-service {
	
			width: 112rpx;
			height: 112rpx;
			background-color: #4CBBAF;
			border-radius: 0 56rpx 56rpx 0;
			font-size: 20rpx;
			padding-right: 10rpx;
			color: #FFFFFF;
			text-align: center;
			position: relative;
			overflow: hidden;
	
		}
	
		.sign-btn-contact {
			position: absolute;
			width: 112rpx;
			height: 112rpx;
			opacity: 0;
			border-radius: 0 56rpx 56rpx 0;
	
		}
	
		.customer-service-img {
			margin-top: 20rpx;
			width: 38rpx;
			height: 38rpx;
	
		}
   .p-title {
		margin: 80rpx 0 0 27rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.p-cards {
		margin-top: 60rpx;
		margin-left: 24rpx;
		display: flex;
	}

	.p-cards-l {
		margin-left: 29rpx;
		width: 124rpx;
		height: 124rpx;
	}

	.p-cards-l-img {
		width: 124rpx;
		height: 124rpx;
	}

	.p-cards-r {
		margin: 40rpx 56rpx 0 0;
		width: 48rpx;
		height: 48rpx;
	}

	.p-cards-r-img {
		width: 48rpx;
		height: 48rpx;
	}

	.p-cards-c {
		margin-left: 20rpx;
		flex: 1;
	}

	.qo {
		margin-top: 60rpx;
	}

	.qo-t1 {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.qo-t2 {
		margin-left: 59rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.qo-t3 {
		font-size: 42rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF1D4D;
	}

	.qo-t4 {
		position: relative;
		display: inline-block;
	}

	.qo-t5 {
		position: absolute;
		top: 20rpx;
		right: 0;
		width: 80rpx;
		height: 1rpx;
		border: 1px solid #333333;
	}

	.qo-t6 {
		margin-left: 20rpx;
		font-size: 30rpx;
		font-family: DIN;
		font-weight: bold;
		color: #333333;
	}

	.q-list {
		margin-top: -80rpx;
	}

	.li-lists {
		display: flex;
		overflow: hidden;
		margin: 28rpx auto 0;
		width: 639rpx;
		height: 90rpx;
		background: #F2F1F8;
		border-radius: 16rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		line-height: 90rpx;
	}

	.li-lists-ipt {
		display: inline-block;
		margin: 23rpx 0 0;
		color: #333333;
	}

	.li-lists-text {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		margin-left: 20rpx;
	}

	.tip-text {
		margin: 23rpx 0 0 57rpx;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.foo-li {
		position: relative;
	}

	.button {
		display: flex;
		margin: 60rpx 0 0 0;
		padding: 30rpx 26rpx 0;
		width: 750rpx;
		height: 98rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -9rpx 14rpx 0rpx rgba(134, 134, 134, 0.15);
	}

	.button-one {
		height: 80rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		line-height: 80rpx;
	}

	.button-two {
		height: 80rpx;
		flex: 1;
		font-size: 42rpx;
		font-family: DIN;
		font-weight: bold;
		color: #FF1D4D;
		line-height: 80rpx;
	}

	.button-three {
		width: 264rpx;
		height: 80rpx;
		background: #F5D792;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		line-height: 80rpx;
	}
	
	.close-img {
		position: absolute;
		top: 20rpx;
		right: 20rpx;
		font-size: 60rpx;
		width: 40rpx;
		height: 40rpx;
	}
	.sq-btn {
		margin: 100rpx auto 0;
		width: 500rpx;
		height: 80rpx;
		background: #F5D792;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		line-height: 80rpx;
	}
</style>